<template>
  <div class="perview">
    <el-container v-loading="loding">
      <el-header class="header_div">
        <div>
          <h3>云课招新考试</h3>
          <el-button
            class="return_btn"
            type="primary"
            icon="el-icon-back"
            plain
            @click="$router.go(-1)"
            >返回</el-button
          >
        </div>
      </el-header>

      <el-container style="margin-top: 70px">
        <el-container>
          <div style="height: 88vh; overflow: auto">
            <div v-for="(item, index) in topics" :key="index">
              <el-main style="text-align: left">
                <el-card shadow="always">
                  <div slot="header" class="clearfix">
                    <span
                      >题目<span style="font-weight: 700; font-size: 18px"
                        >[{{ index + 1 }}]</span
                      ></span
                    >
                  </div>
                  <p
                    style="text-indent: 2em; white-space: pre-wrap"
                    v-html="item.topic"
                  ></p>
                  <pre-code
                    :codes="item.answer != '' ? item.answer : '//暂无代码'"
                    :modeValue="item.modeValue"
                  ></pre-code>
                </el-card>
              </el-main>
              <hr />
            </div>
          </div>

          <el-footer>
            <el-button type="primary" @click="comitClick"
              >确认提交（结束考试）</el-button
            >
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import PreCode from "../components/PreCode.vue";
export default {
  components: {
    PreCode,
  },
  mounted() {
    this.getQuestion();
    console.log(this.topics);
  },
  data() {
    return {
      topics: [],
      loding: true,
    };
  },
  methods: {
    getQuestion() {
      this.$http.get("/getQuestion").then((res) => {
        // console.log(res);
        this.getPreview(res.data.data.question);
      });
    },
    async getPreview(topics) {
      console.log("123123",topics);
      topics.filter((item) => {
        const reg = /\/api\//g;
        item.topic = item.topic.replace(reg, this.$httpUrl);
      });
      const res = await this.$http.get("/preview");
      console.log(res);
      const data = res.data.data;
      for (let i in topics) {
        for (let j in data) {
          if (topics[i].tid === data[j].tid) {
            const answer = JSON.parse(data[i].answer);
            this.$set(topics[i], "answer", answer.code);
            this.$set(
              topics[i],
              "modeValue",
              answer.type ?? localStorage.getItem("modeValue" + i)
            );
            break;
          }
        }
      }
      this.topics = topics;
      setTimeout(() => {
        this.loding = false;
      }, 500);
    },
    comitClick() {
      this.$http.post("/submit").then((res) => {
        console.log(res);
        if (res.data.message !== "ok") {
          return this.$message.error("提交失败");
        }
        this.$message.success("提交成功，考试结束");
        localStorage.clear();
        this.$cookies.remove("token");
        this.open();
      });
      console.log("提交");
    },
    open() {
      this.$alert("考试结束，可自行关闭浏览器", "考试结束", {
        callback: (action) => {
          this.$message({
            type: "success",
            message: `action: ${action}`,
          });
          this.$router.push("/");
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  background-image: linear-gradient(to bottom right, #46fca7, #3fd5fb);
  height: 100vh;
}
.perview {
  width: 70%;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  min-width: 1000px;
}
.el-header,
.el-footer {
  font-size: 20px;
  background-color: #f4f7f9;

  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  /* background-color: #fff; */
  color: #333;
  text-align: center;
  line-height: 200px;
  border-right: 1px rgba(0, 0, 0, 0.3) solid;
}

.el-main {
  /* background-color: #fff; */
  color: #333;
  text-align: left;
  /* height: 80vh; */
  font-size: 18px;
  word-wrap: normal;
  word-break: normal;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.header_div {
  width: 70%;
  position: Fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}
.header_div div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.return_btn {
  position: absolute;
  left: 3%;
  // top: 50%;
}
</style>